  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
  <canvas id="c1" width="600" height="400" style="width: 600px; height: 400px;"></canvas>
  <script>
    // 画布
    const canvas = document.getElementById('c1')
    // 画笔
    const ctx = canvas.getContext('2d')
    // 绘制矩形 位置x 位置y 宽 高
    ctx.beginPath()
    ctx.moveTo(200,300)
    ctx.bezierCurveTo(110,240,130,370,200,400)
    ctx.moveTo(200,300)
    ctx.bezierCurveTo(290,240,270,370,200,400)
    ctx.strokeStyle = 'red'
    ctx.stroke()

    // 矩形
    ctx.moveTo(280,180)
    ctx.fillStyle='pink'
    ctx.fillRect(280,180,40,40)
    ctx.closePath()
  </script>
  </body>
  </html>